<template>
  <div class="detailContainer">
    <div
      style="
        height: 100%;
        padding-left: 150px;
        padding-right: 150px;
        overflow-y: auto;
        padding-bottom: 70px;
      "
    >
      <div style="padding: 20px">
        <el-card>
          <div style="display: flex; justify-content: space-between">
            <div class="infoContainer">
              <div class="title">
                <span class="name">{{ detailData.name }}</span>
                <span class="id">{{ detailData.id }}</span>
              </div>
              <div class="detailInfo">
                <div class="createInfo">
                  <span style="font-size: 15px"
                    >创建人：<span style="font-size: 14px; color: #969696"
                      >User</span
                    ></span
                  >
                  <span style="font-size: 15px; margin-left: 20px"
                    >创建时间：<span style="font-size: 14px; color: #969696">{{
                      dayjs(detailData.createdAt).format("YYYY-MM-DD")
                    }}</span></span
                  >
                </div>
                <div class="updateInfo">
                  <span style="font-size: 15px"
                    >更新人：<span style="font-size: 14px; color: #969696">{{
                      userStore.username
                    }}</span></span
                  >
                  <span style="font-size: 15px; margin-left: 20px"
                    >更新时间：<span style="font-size: 14px; color: #969696">{{
                      dayjs(detailData.updatedAt).format("YYYY-MM-DD")
                    }}</span></span
                  >
                </div>
              </div>
              <div class="status" style="margin-top: 20px">
                <span style="font-size: 15px; line-height: 30px"
                  >工单进度：</span
                >
                <el-progress
                  :text-inside="true"
                  :stroke-width="26"
                  :percentage="detailData.progress"
                  style="width: 300px"
                  :color="
                    detailData.status == '已关闭'
                      ? '#909399'
                      : detailData.status == '已暂停'
                      ? '#ADD8F7'
                      : ''
                  "
                  :status="detailData.status == '已完成' ? 'success' : ''"
                ></el-progress>
              </div>
              <div class="buttonGroup" style="margin-top: 20px">
                <el-button
                  v-if="detailData.status == '未开始'"
                  type="primary"
                  plain
                  style="width: 80px"
                  >撤回</el-button
                >
                <el-button
                  v-if="detailData.status == '未开始'"
                  type="primary"
                  plain
                  style="width: 80px"
                  @click="changeStatus('开始')"
                  >开始</el-button
                >
                <el-button
                  v-if="detailData.status == '进行中'"
                  type="primary"
                  plain
                  style="width: 80px"
                  @click="changeStatus('暂停')"
                  >暂停</el-button
                >
                <el-button
                  v-if="detailData.status == '已暂停'"
                  type="primary"
                  plain
                  style="width: 80px"
                  >继续</el-button
                >
                <el-button
                  type="primary"
                  v-if="
                    detailData.status == '进行中' ||
                    detailData.status == '已暂停'
                  "
                  plain
                  style="width: 80px"
                  @click="changeStatus('完成')"
                  >完成</el-button
                >
                <el-button
                  v-if="
                    detailData.status == '进行中' ||
                    detailData.status == '已暂停'
                  "
                  type="primary"
                  plain
                  style="width: 80px"
                  @click="changeStatus('关闭')"
                  >关闭</el-button
                >
                <el-button
                  type="primary"
                  v-if="detailData.status == '已关闭'"
                  plain
                  style="width: 80px"
                  @click="changeStatus('重启')"
                  >重启</el-button
                >
                <el-button type="primary" plain style="width: 80px"
                  >打印</el-button
                >
              </div>
            </div>
            <div class="imgShow">
              <img
                v-if="detailData.status == '进行中'"
                src="/public/orderImgs/doing.png"
                alt=""
                style="width: 80px"
              />
              <img
                v-else-if="detailData.status == '已关闭'"
                src="/public/orderImgs/close.png"
                alt=""
                style="width: 80px"
              />
              <img
                v-else-if="detailData.status == '已完成'"
                src="/public/orderImgs/finish.png"
                alt=""
                style="width: 80px"
              />
              <img
                v-else-if="detailData.status == '未开始'"
                src="/public/orderImgs/notStart.png"
                alt=""
                style="width: 80px"
              />
              <img
                v-else-if="detailData.status == '已暂停'"
                src="/public/orderImgs/pause.png"
                alt=""
                style="width: 80px"
              />
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 20px">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          >
            <el-menu-item index="1">基础信息</el-menu-item>
            <el-menu-item index="2">物料清单</el-menu-item>
            <el-menu-item index="3">领料记录</el-menu-item>
            <el-menu-item index="4">工序任务</el-menu-item>
            <el-menu-item index="5">报工记录</el-menu-item>
            <el-menu-item index="6">质检记录</el-menu-item>
            <el-menu-item index="7">退料记录</el-menu-item>
            <el-menu-item index="8">入库记录</el-menu-item>
            <el-menu-item index="9">执行进度</el-menu-item>
          </el-menu>
          <div class="basicBody">
            <div class="basicInfoContainer" v-if="activeIndex == '1'">
              <el-descriptions
                style="width: 100%; margin-top: 40px; margin-bottom: 40px"
                column="2"
                label-width="120;"
              >
                <el-descriptions-item label="工单编号">{{
                  detailData.workOrderNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="工单名称">{{
                  detailData.workOrderName
                }}</el-descriptions-item>
                <el-descriptions-item label="关联计划">{{
                  detailData.relatedPlan
                }}</el-descriptions-item>
                <el-descriptions-item label="计划编号">{{
                  detailData.productNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="类型">{{
                  detailData.productType
                }}</el-descriptions-item>
                <el-descriptions-item label="订单编号">{{
                  detailData.saleNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{
                  detailData.productName
                }}</el-descriptions-item>
                <el-descriptions-item label="产品编号">{{
                  detailData.productNumber
                }}</el-descriptions-item>
                <el-descriptions-item label="规格型号">{{
                  detailData.specificationModel
                }}</el-descriptions-item>
                <el-descriptions-item label="产品类型">{{
                  detailData.productType
                }}</el-descriptions-item>
                <el-descriptions-item label="单位">{{
                  detailData.unit
                }}</el-descriptions-item>
                <el-descriptions-item label="BOM编号">{{
                  detailData.remark
                }}</el-descriptions-item>
                <el-descriptions-item label="计划数量">{{
                  detailData.plannedQuantity
                }}</el-descriptions-item>
                <el-descriptions-item label="实际生产数量">{{
                  detailData.actualQuantity
                }}</el-descriptions-item>
                <el-descriptions-item label="计划开工时间">{{
                  detailData.plannedStartTime
                }}</el-descriptions-item>
                <el-descriptions-item label="计划完工时间">{{
                  detailData.plannedEndTime
                }}</el-descriptions-item>
                <el-descriptions-item label="实际开工时间">{{
                  detailData.actualStartTime
                }}</el-descriptions-item>
                <el-descriptions-item label="实际完工时间">{{
                  detailData.actualEndTime
                }}</el-descriptions-item>
                <el-descriptions-item label="生产批次">{{
                  detailData.remark
                }}</el-descriptions-item>
                <el-descriptions-item label="需求日期">{{
                  detailData.requiredDate
                }}</el-descriptions-item>
              </el-descriptions>
            </div>
            <div v-else-if="activeIndex == '2'" style="padding: 20px">
              <el-button plain type="primary" style="width: 80px"
                >领料出库</el-button
              >
              <el-button plain type="primary" style="width: 80px"
                >退料出库</el-button
              >
              <el-button plain type="primary" style="width: 80px"
                >导出</el-button
              >
              <el-table style="margin-top: 20px" :data="tableData" border>
                <el-table-column
                  type="selection"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="序号"
                  type="index"
                  width="60"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="产品编号"
                  width="90"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="产品名称"
                  width="90"
                  align="center"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  label="规格型号"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="产品类型"
                  align="center"
                  width="90"
                ></el-table-column>
                <el-table-column label="单位" align="center"></el-table-column>
                <el-table-column
                  label="工单编号"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="工单名称"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="批次号"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="有效期"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="装箱数量"
                  width="90"
                  align="center"
                ></el-table-column>
                <el-table-column
                  label="备注"
                  width="200"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
            <div v-else-if="activeIndex == '3'" style="padding: 20px">
              <el-button plain type="primary" style="width: 80px"
                >导出</el-button
              >
              <el-table border style="margin-top: 20px">
                <el-table-column type="selection" align="center" fixed="left">
                </el-table-column>
                <el-table-column
                  type="index"
                  align="center"
                  width="60"
                  label="序号"
                  fixed="left"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="领料单编号"
                  fixed="left"
                  width="100"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="领料单名称"
                  fixed="left"
                  width="100"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="领料日期"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="工单名称"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="工单编号"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="任务名称"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="任务编号"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="工艺路线"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="工序名称"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="物料信息"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="领料总数"
                  width="90"
                ></el-table-column>
                <el-table-column
                  align="center"
                  label="备注"
                  width="200"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="footer" :class="{ 'footer-visible': isFooterVisible }">
      <div class="footerButton">
        <el-button type="primary" plain style="width: 80px" @click="close"
          >关闭</el-button
        >
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import {
  putProduceWorkOrderUpdateApi,
  getProduceWorkOrderDetailApi,
} from "@/api/Produce";
import { ProductionWorkOrderData } from "@/api/Produce/res";
import useUserStore from "@/store/modules/User";
import dayjs from "dayjs";

const $router = useRouter();
const $route = useRoute();
const userStore = useUserStore();
let activeIndex = ref("1");

//mockData
let detailData = ref<ProductionWorkOrderData>({
  workOrderNumber: "",
  workOrderName: "",
  progress: "",
  relatedPlan: "",
  productName: "",
  productNumber: "",
  specificationModel: "",
  productType: "",
  unit: "",
  requiredDate: "", // 字符串格式日期
  plannedQuantity: "", // 字符串格式数量
  actualQuantity: "", // 字符串格式数量
  plannedStartTime: "", // 字符串格式日期
  plannedEndTime: "", // 字符串格式日期
  actualStartTime: "", // 字符串格式日期
  actualEndTime: "", // 字符串格式日期
  status: "",
});
let tableData = ref([{}]);
const isFooterVisible = ref(false);

const getOrderInfo = async () => {
  try {
    const res: ProductionWorkOrderData = await getProduceWorkOrderDetailApi({
      objectId: $route.query.objectId as string,
    });
    detailData.value = res;
  } catch (err: any) {
    ElMessage({ type: "error", message: err.message });
  }
};

onMounted(() => {
  setTimeout(() => {
    isFooterVisible.value = true;
  }, 100);
  getOrderInfo();
});

const close = () => {
  $router.replace("/production/order");
};
const handleSelect = (key: string, keyPath: string[]) => {
  activeIndex.value = keyPath[0];
};
const changeStatus = async (operate) => {
  try {
    let status = "";
    switch (operate) {
      case "暂停":
        status = "已暂停";
        break;
      case "开始":
        status = "进行中";
        break;
      case "完成":
        status = "已完成";
        break;
      case "关闭":
        status = "已关闭";
        break;
      case "重启":
        status = "未开始";
        break;
      default:
        status = "";
    }
    const res = await putProduceWorkOrderUpdateApi({
      objectId: $route.query.objectId as string,
      status,
      progress:
        status == "已完成"
          ? "100"
          : status == "已关闭"
          ? "0"
          : detailData.value.progress,
    });
    ElMessage({ type: "success", message: "操作成功" });
    getOrderInfo();
  } catch (err: any) {
    ElMessage({ type: "error", message: err.message });
  }
};
</script>
    
    <style scoped lang="scss">
.detailContainer {
  width: 100%;
  position: relative;
  height: 100%;
  transform: translate(0);
  .title {
    .name {
      font-weight: bold;
      font-size: 18px;
    }
    .id {
      color: #969696;
      font-size: 13px;
      margin-left: 10px;
    }
  }
  .detailInfo {
    margin-top: 10px;
    display: flex;
    align-items: center;
  }
  .updateInfo {
    margin-left: 40px;
  }
  .status {
    display: flex;
  }
  .basicBody {
    width: 100%;
    .basicInfoContainer,
    .warehouseContainer {
      padding: 20px;
      .milestone {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 1.5px;
        background-color: #dfe2e7;
        margin-top: 20px;
        .milestone-content {
          border: 1.5px solid #dfe2e7;
          padding: 10px;
          padding-left: 20px;
          padding-right: 20px;
          font-weight: bold;
          font-size: 15px;
          border-radius: 10px;
          z-index: 999;
          background-color: #fff;
          color: #1b9aee;
        }
      }
    }
    .warehouseContainer {
      margin-top: 20px;
    }
  }
  .footer {
    z-index: 999;
    width: 100%;
    height: 70px;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 10px;
    display: flex;
    justify-content: center;
    box-shadow: 0 -8px 10px rgba(92, 92, 92, 0.1);
    transform: translateY(100%); // 初始状态在视口下方
    transition: transform 0.5s ease-out; // 添加过渡效果

    &.footer-visible {
      transform: translateY(0); // 显示时回到原位
    }
  }
}
</style>
    